<template>
	<view class="page">
		<div class="zichan-banner-container">
			<cl-banner @change="bannerChange" :list="list" radius="0" height="540rpx"> </cl-banner>
			<div class="banner-num">{{ currentBannerIndex + 1 }}/{{ list.length }}</div>
		</div>
		<div class="zichan-info-card">
			<div class="-title">
				<div class="-title-text">
					<span class="-title-text-text">资产信息</span>
				</div>
				<div class="-title-more">
					<cl-icon name="favor-fill" color="#ffffff"></cl-icon>
					<cl-icon name="share" color="#ffffff"></cl-icon>
					<cl-icon name="keyboard-26" color="#ffffff"></cl-icon>
				</div>
			</div>
			<div class="-info-container">
				<div class="-info-line">
					<div class="-info-item">参考单价/参考单价</div>
					<div class="-info-item">参考单价/参考单价</div>
				</div>
				<div class="-info-line">
					<div class="-info-item">参考单价/参考单价</div>
					<div class="-info-item">参考单价/参考单价</div>
				</div>
				<div class="-info-line">
					<div class="-info-item">参考单价/参考单价</div>
					<div class="-info-item">参考单价/参考单价</div>
					<div class="-info-item">参考单价/参考单价</div>
				</div>
			</div>
		</div>

		<div class="tj-container" style="background-color: #ffffff">
			<div class="-title">
				<div class="-title-text">
					<span class="-title-text-text">精选内容</span>
				</div>
				<div class="-title-more">查看更多<cl-icon name="arrow-right"></cl-icon></div>
			</div>
			<div class="-inner-card-list">
				<div class="-inner-card-item">
					<image
						style="width: 100%; height: 100%"
						src="https://admin.cool-js.com/uni/pages/demo/static/bg.png"
					></image>
				</div>
				<div class="-inner-card-item">
					<image
						style="width: 100%; height: 100%"
						src="https://admin.cool-js.com/uni/pages/demo/static/bg.png"
					></image>
				</div>
				<div class="-inner-card-item">
					<image
						style="width: 100%; height: 100%"
						src="https://admin.cool-js.com/uni/pages/demo/static/bg.png"
					></image>
				</div>
			</div>
		</div>
		<div style="height: 20rpx"></div>
		<div style="height: 10rpx; background-color: #f8f8f8"></div>
		<div class="tj-container" style="background-color: #ffffff">
			<div class="-title">
				<div class="-title-text">
					<span class="-title-text-text">细节展示</span>
				</div>
				<div class="-title-more">查看更多<cl-icon name="arrow-right"></cl-icon></div>
			</div>
			<div class="-inner-card-list">
				<div class="-inner-card-item">
					<image
						style="width: 100%; height: 100%"
						src="https://admin.cool-js.com/uni/pages/demo/static/bg.png"
					></image>
				</div>
				<div class="-inner-card-item">
					<image
						style="width: 100%; height: 100%"
						src="https://admin.cool-js.com/uni/pages/demo/static/bg.png"
					></image>
				</div>
				<div class="-inner-card-item">
					<image
						style="width: 100%; height: 100%"
						src="https://admin.cool-js.com/uni/pages/demo/static/bg.png"
					></image>
				</div>
			</div>
		</div>
		<div style="height: 20rpx"></div>
		<div style="height: 10rpx; background-color: #f8f8f8"></div>
		<div class="tj-container" style="background-color: #ffffff">
			<div class="-title">
				<div class="-title-text">
					<span class="-title-text-text">其他说明</span>
				</div>
				<div class="-title-more"></div>
			</div>
			<div class="-desc-container">
				其他说明 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi illum ipsa
				itaque, natus nobis omnis ratione recusandae, repellat reprehenderit, sed tenetur totam!
				Aliquid at consequatur distinctio eligendi eos esse nam!
			</div>
		</div>
		<div style="height: 20rpx"></div>
		<div style="height: 10rpx; background-color: #f8f8f8"></div>
		<div class="tj-container" style="background-color: #ffffff">
			<div class="-title">
				<div class="-title-text">
					<span class="-title-text-text">您可以直接拨打电话</span>
				</div>
				<div class="-title-more"></div>
			</div>
			<div class="-desc-container">
				<div style="display: flex; justify-content: space-between">
					<div style="color: #a0a0a0">
						<div>联系人：XXX</div>
						<div>联系电话：12312312312</div>
					</div>
					<div>
						<image src="/static/phone.png" style="width: 80rpx; height: 80rpx"></image>
					</div>
				</div>
			</div>
		</div>
		<div style="height: 20rpx"></div>
		<div style="height: 10rpx; background-color: #f8f8f8"></div>
		<div class="tj-container" style="background-color: #ffffff">
			<div class="-title">
				<div class="-title-text">
					<span class="-title-text-text">合作意向登记</span>
				</div>
				<div class="-title-more"></div>
			</div>
			<div class="-desc-container">
				<cl-input height="100rpx" clearable placeholder="姓名" />
				<div style="height: 20rpx"></div>
				<cl-input height="100rpx" clearable placeholder="联系电话" />
				<div style="height: 20rpx"></div>
				<cl-textarea clearable placeholder="其他信息" />
			</div>
			<div style="margin-top: 30rpx; width: 690rpx; margin-left: 30rpx">
				<cl-button style="width: 100%" fill background-color="#005FC6" type="primary"
					>提交留言</cl-button
				>
			</div>
			<div style="height: 80rpx"></div>
		</div>
	</view>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const currentBannerIndex = ref(0);
const list = ref([
	{
		url: "https://admin.cool-js.com/uni/pages/demo/static/bg.png",
	},
	{
		url: "https://admin.cool-js.com/uni/pages/demo/static/bg.png",
	},
	{
		url: "https://admin.cool-js.com/uni/pages/demo/static/bg.png",
	},
	{
		url: "https://admin.cool-js.com/uni/pages/demo/static/bg.png",
	},
	{
		url: "https://admin.cool-js.com/uni/pages/demo/static/bg.png",
	},
	{
		url: "https://admin.cool-js.com/uni/pages/demo/static/bg.png",
	},
]);
const bannerChange = (e) => {
	currentBannerIndex.value = e;
};
</script>

<style lang="scss">
.zichan-banner-container {
	position: relative;
	.banner-num {
		padding: 6rpx 20rpx;
		background-color: #cecac6;
		color: #ffffff;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
		font-size: 24rpx;
	}
}
.zichan-info-card {
	display: flex;
	flex-direction: column;
	.-title {
		width: calc(100% - 30rpx);
		margin-right: 0rpx;
		margin-left: 30rpx;
		display: flex;
		height: 80rpx;
		margin-top: 30rpx;
		justify-content: space-between;
		.-title-text-text {
			font-size: 40rpx;
			color: #005fc6;
		}
		.-title-more {
			border-bottom-left-radius: 24rpx;
			border-top-left-radius: 24rpx;
			background-color: #ebb287;
			height: 48rpx;
			display: flex;
			padding-right: 30rpx;
			padding-left: 30rpx;
			align-items: center;
			justify-content: space-around;
			width: 140rpx;
		}
	}
	.-info-container {
		width: 100%;
		.-info-line {
			display: flex;
			//justify-content: space-between;
			margin-top: 30rpx;
			background-color: #fbf9f8;
			margin-left: 30rpx;
			margin-right: 30rpx;
			.-info-item {
				width: 33.3%;
				display: flex;

				font-size: 24rpx;
				//background-color: #cccccc;
			}
		}
	}
}
</style>
